<template>
	<view
		class="move_box"
		id="move_box"
		:class="[returnShow? 'button_show': 'button_unshow']"
		:style="{bottom: `${bottom? bottom: defaultBottom}rpx`, right: `${defaultRight}rpx`}"
		@click="returnTop"
		@touchmove.native.stop="touchmove"
	>
		<slot></slot>
	</view>
	
</template>

<script>
	export default {
		name:"move-button",
		props: {
			show: {
				type: Boolean,
				default: false
			},
			navi_Height: {
				type: Number,
				default: 0
			},
			defaultBottom: {
				type: Number,
				default: 0
			},
			defaultRight: {
				type: Number,
				default: 0
			},
		},
		data() {
			return {
				bottom: 0,  // rpx
				contentWidth: 0, //px
				screenWidth: 0,
				screenHeight: 0,
				returnShow: false,
			};
		},
		watch: {
			show: {
				immediate: true,
				handler (newVal, oldVal) {
					this.returnShow = newVal;
				},
			},
		},
		mounted () {
			let sysInfo = uni.getSystemInfoSync();
			this.screenWidth = sysInfo.screenWidth;
			this.screenHeight = sysInfo.screenHeight;
			this.init();
		},
		methods: {
			init () {
				let move_box_info = uni.createSelectorQuery().in(this);
				move_box_info.select("#move_box").boundingClientRect((res)=>{
					this.contentWidth = res.width;
				}).exec()
			},
			touchmove (e) {
				let ratio = 750 / this.screenWidth;
				if ((e.touches[0].clientY) <= this.navi_Height + this.contentWidth / 2) return; // 超出头部导航栏则停止
				let bottom = (this.screenHeight - e.touches[0].clientY) * ratio - this.contentWidth;
				this.bottom = bottom;
			},
			returnTop () {
				this.$emit('returnTop')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.move_box{
		position: fixed;
		right: 0;
		z-index: 999999999;
		bottom: 320rpx;
	}
	@keyframes show {
		from{
			transform: translateX(150%);
		}to{
			transform: translateX(0);
		}
	}
	@keyframes unshow {
		from{
			transform: translateX(0);
		}to{
			transform: translateX(150%);
		}
	}
	.button_show{
		animation-name: show;
		animation-duration: 0.4s;
		animation-fill-mode: forwards;
	}
	.button_unshow{
		animation-name: unshow;
		animation-duration: 0.4s;
		animation-fill-mode: forwards;
	}
</style>